<!--
* @author wn
* @date 2023/03/07 10:54:14
* @description: 网页框架
!-->
<template>
	<a-layout>
		<!-- 左侧菜单栏 -->
		<side-menu
			:menus="permissionList"
			:collapsed="collapsed"
			@menuClick="menuClick"
		/>
		<!-- 右侧区域 -->
		<a-layout>
			<!-- 头部 -->
			<global-header v-model:collapsed="collapsed" />
			<!-- 主区域 -->
			<a-layout-content>
				<slot />
			</a-layout-content>
			<!-- 底部区域 -->
			<a-layout-footer style="padding: 0px">
				<global-footer />
			</a-layout-footer>
		</a-layout>
	</a-layout>
</template>
<script setup>
import GlobalFooter from './GlobalFooter'
import SideMenu from '@/components/menu/SideMenu'
import { provide, ref } from 'vue'
import { useUser } from '@/stores/modules/userStore'
import GlobalHeader from './GlobalHeader.vue'
import { useTags } from '@/stores/modules/tagStore'
import { recursiveTitle } from '@/utils/menuUtil'
import { useRouter } from 'vue-router'

const collapsed = ref(false)

// useUser 获取 左侧菜单 permissionList
const { user } = useUser()
const { permissionList } = user

// UserMenu 是孙子组件 注入 user
provide('user', user)

// useTags
const { addTags } = useTags()

const router = useRouter()
/**
 * 点击 menu
 * 1 生成 route--menu 的 key 换为 path
 * 2 生成 Tag
 * 3 添加 Tags
 * 4 跳转对应路由
 */
const menuClick = key => {
	// 2 生成 Tag
	const title = recursiveTitle(key, permissionList)
	const tag = { path: key, title }
	// 3 添加 Tags
	addTags(tag)
	// 4 跳转对应路由
	router.push(key)
}
</script>
<style lang="less"></style>
